import React from 'react';
import { Button, DataSet, Form, Password, Row } from 'choerodon-ui/pro';
import { Alert, Divider } from 'choerodon-ui';
import { connect } from 'dva';
import { LabelLayout } from "choerodon-ui/pro/lib/form/enum";
import { ButtonColor } from "choerodon-ui/pro/lib/button/enum";
import { DataSetStatus } from 'choerodon-ui/pro/lib/data-set/enum';
import { StateType } from '../../model';
import DescriptionsItem from '../DescriptionItem';
import styles from './index.less';

interface Step2Props {
  data? : StateType['step'];
  dispatch? : any;
  submitting? : boolean;
  dataSet : DataSet;
}

const Step2 : React.FC<Step2Props> = (props) => {
  const { data, dispatch, dataSet } = props;
  if (!data) {
    return null;
  }
  const onPrev = () => {
    if (dispatch) {
      dispatch({
        type: 'stepForm/saveCurrentStep',
        payload: 'info',
      });
    }
  };
  /**
   * 点击提交时，校验表单，如果通过则提交，并跳转到结果页
   */
  const onValidateForm = async () => {
    const valid = await dataSet.current?.validate(true);
    if (dispatch && valid) {
      await props.dataSet.submit();
      dispatch({
        type: 'stepForm/saveCurrentStep',
        payload: 'result',
      });
    }
  };

  const { payAccount, receiverAccount, receiverName, amount } = props.dataSet.current?.toData();
  return (
    <>
      <Form
        dataSet={props.dataSet}
        labelLayout={LabelLayout.horizontal}
        className={styles.stepForm}
      >
        <section>
          <Alert
            closable
            showIcon
            message="确认转账后，资金将直接打入对方账户，无法退回。"
            style={{ marginBottom: 24 }}
          />
          <DescriptionsItem labelText="付款账户"> {payAccount}</DescriptionsItem>
          <DescriptionsItem labelText="收款账户"> {receiverAccount}</DescriptionsItem>
          <DescriptionsItem labelText="收款人姓名"> {receiverName}</DescriptionsItem>
          <DescriptionsItem labelText="转账金额">
            <p>
              <span>{amount}</span>
              <span>元</span>
            </p>
          </DescriptionsItem>
          <Divider style={{ margin: '24px 0' }} />
        </section>
        <Password name="password" autoComplete="off" />
        <Row style={{textAlign: 'left'}}>
          <Button color={ButtonColor.primary} onClick={onValidateForm} loading={props.dataSet.status === DataSetStatus.loading}>
            提交
          </Button>
          <Button onClick={onPrev} style={{ marginLeft: 8 }}>
            上一步
          </Button>
        </Row>
      </Form>
    </>
  );
};

export default connect(
  ({
     stepForm,
     loading,
   } : {
    stepForm : StateType;
    loading : {
      effects : { [key : string] : boolean };
    };
  }) => ({
    submitting: loading.effects['stepForm/submitStepForm'],
    data: stepForm.step,
  })
)(Step2);
